import React, { useEffect, useState } from "react";
import { Button, Flex, Modal } from "antd";
import { useTranslation } from 'react-i18next';
import RadarChart from '../RadarChart';
import { ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';

const ChartZoomModal = ({
  chartsZoomModalVisable,
  setChartsZoomModalVisable,
  chartsData,
}) => {
  const MAX_WIDTH = 1200;
  const MIN_WIDTH = 500;
  const MAX_HEIGHT = 1200;
  const { t } = useTranslation();
  const [zoomRatio, setZoomRatio] = useState(1);
  const [width, setWidth] = useState(MIN_WIDTH);
  const [height, setHeight] = useState(500);
  const zoomHandle = (ratio, type) => {
    const newRatio = type === 'inOut' ? ratio + 0.1 : ratio - 0.1;
    setZoomRatio(newRatio);
    setWidth(type === 'inOut' ? width > MAX_WIDTH ? MAX_WIDTH : width + 100 : width - 100);
    setHeight(type === 'inOut' ? height > MAX_HEIGHT ? MAX_HEIGHT : height + 100 : height - 100);
  };
  useEffect(() => {
  }, []);
  return (
    <Modal
      title={t('common.plot')}
      width={MAX_WIDTH}
      onCancel={() => setChartsZoomModalVisable(false)}
      open={chartsZoomModalVisable}
      footer={null}>
      <div style={{ width: '98%' }}>
        <Flex justify="flex-end">
          <Button type="text" disabled={width > MAX_WIDTH} onClick={() => { zoomHandle(zoomRatio, 'inOut') }} icon={<ZoomInOutlined style={{ fontSize: 20 }} />} />
          <Button type="text" disabled={width <= MIN_WIDTH} onClick={() => { zoomHandle(zoomRatio, 'outOut') }} icon={<ZoomOutOutlined style={{ fontSize: 20 }} />} />
        </Flex>
        <div style={{ width: '100%', height: `${height}px`, margin: 'auto' }} id='radar-chart-zoom-wrap'>
          <RadarChart chartsData={chartsData} zoomRatio={zoomRatio} type='zoom' />
        </div>
      </div>
    </Modal>
  )
};

export default ChartZoomModal;